3 files changed, 38 insertions, 0 deletions
diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx
new file mode 100644
index 0000000..7eb1e7e
--- /dev/null
+++ b/src/app/manga/[title]/[id]/[read]/download.jsx
@@ -0,0 +1,17 @@
+import styles from "./read.module.css";
+import Link from "next/link";
+
+export default function DownloadManga({ chapterId: id }) {
+	return (
+		<div className={styles.DownloadMain}>
+			<Link
+				href={`https://manga-downloader-7nca.onrender.com/download?id=${id}`}
+				style={{ textDecoration: "none" }}
+			>
+				<button title="This feature is in very early stages. Use it on your own risk">
+					Download - Beta
+				</button>
+			</Link>
+		</div>
+	);
+}
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index 0d58df6..2823f81 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -1,5 +1,6 @@
 import styles from "./read.module.css";
 import Image from "next/image";
+import DownloadManga from "./download";
 
 export default async function Read({ params }) {
 	const chapterId = params.read;
@@ -23,6 +24,7 @@ export default async function Read({ params }) {
 	return (
 		<div className={styles.Main}>
 			<div className={styles.ImageContainer}>
+				<DownloadManga chapterId={chapterId} />
 				{images &&
 					images.map((item, index) => (
 						<div className={styles.Image} key={index}>
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index 3a8c99f..80d91ae 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -31,6 +31,25 @@
 	font-size: 20px;
 }
 
+.DownloadMain {
+	text-align: center;
+}
+
+.DownloadMain button {
+	border: none;
+	outline: none;
+	border-radius: 5px;
+	padding: 5px;
+	font-family: "Lato";
+	font-size: 16px;
+	background-color: var(--light-green);
+	cursor: pointer;
+}
+
+.DownloadMain button:hover {
+	background-color: var(--pastel-red);
+}
+
 @media screen and (max-width: 768px) {
 	.ImageContainer img {
 		width: 90%;